<template>
    <!-- 视频监控 -->
    <div class="siderRight_video_monitoring">
        <div class="monitoring_points">
            <div></div>
            <div>
                <div>安防视频监控点</div>
                <div>
                    <span>10</span>
                    <span>个</span>
                </div>
            </div>
        </div>
        <div class="toggle_monitoring">
            <div :class="isactive === 'highAltitude' ? 'active' : ''" @click="isactive = 'highAltitude'">高空瞭望</div>
            <div :class="isactive === 'barrier' ? 'active' : ''" @click="isactive = 'barrier'">道闸</div>
        </div>
        <div class="monitor_list">
            <div class="list_data">
                <div class="list_data_box" v-for="(item, index) in state.list" :key="index">
                    <div v-for="(i, d) in item.list" :key="d" @click="activeclick(i.type)">
                        <div></div>
                        <div>{{ i.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import renderPopconfirmComponent from '@/components/common/Popconfirm';
import highAltitudecompoents from '@/components/custom/security/modal/highAltitude/index.vue';
import barriercompoents from '@/components/custom/security/modal/Barrier/index.vue';
const isactive = ref('highAltitude');
const state = reactive({
    list: [
        {
            list: [
                {
                    name: '高空瞭望1',
                    type: 'highAltitude'
                },
                {
                    name: '高空瞭望2',
                    type: 'barrier'
                },
                {
                    name: '高空瞭望3'
                },
                {
                    name: '高空瞭望4'
                }
            ]
        },
        {
            list: [
                {
                    name: '高空瞭望1'
                },
                {
                    name: '高空瞭望2'
                },
                {
                    name: '高空瞭望2'
                },
                {
                    name: '高空瞭望2'
                }
            ]
        }
    ]
});
const activeclick = (type: any) => {
    if (type === 'highAltitude') {
        renderPopconfirmComponent({ title: '高空瞭望摄像头1', showPop: true,w:'45%' }, highAltitudecompoents);
    }
    if (type === 'barrier') {
        renderPopconfirmComponent({ title: '道闸', showPop: true }, barriercompoents);
    }
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 100%;
    height: 5px;
    background: rgba(12, 80, 204, 0.27);
}
::-webkit-scrollbar-thumb {
    background: #0c50cc;
    border-radius: 3px;
}

.siderRight_video_monitoring {
    height: 94%;
    .monitoring_points {
        margin-top: 5px;
        display: flex;
        align-items: center;
        > div {
            &:nth-of-type(1) {
                height: 30px;
                width: 55%;
                background: url('@/assets/image/monitoringpoints.png') no-repeat;
                background-size: 100% 100%;
            }
            &:nth-of-type(2) {
                width: 45%;
                padding-left: 3px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                > div {
                    &:nth-of-type(1) {
                        font-size: 12px;
                        color: #ffffff;
                    }
                    &:nth-of-type(2) {
                        display: flex;
                        align-items: center;
                        > span {
                            color: #ffffff;
                            background: linear-gradient(182deg, #41f6ff 0%, #07bfff 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            &:nth-of-type(1) {
                                font-size: 20px;
                                font-family: PangMenZhengDao;
                            }
                            &:nth-of-type(2) {
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
    .toggle_monitoring {
        display: flex;
        justify-content: center;
        margin-top: 12px;
        > div {
            width: 60px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            background: rgba(27, 147, 251, 0.2);
            cursor: pointer;
            &:nth-of-type(1) {
                margin-right: 8px;
            }
        }
        .active {
            background: #1b93fb;
        }
    }
    .monitor_list {
        width: 100%;
        height: 80%;
        overflow: hidden;
        padding-top: 12px;
        padding-bottom: 5px;
        .list_data {
            width: 100%;
            height: 100%;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;

            &_box {
                display: inline-block;
                width: 100%;
                height: 100%;
                margin-left: 14px;
                white-space: normal;
                > div {
                    width: calc(50% - 7px);
                    height: calc(50% - 6px);
                    margin-right: 14px;
                    margin-bottom: 12px;
                    display: inline-block;
                    > div {
                        &:nth-of-type(1) {
                            height: 70%;
                            background: url('@/assets/image/monitornback.png') no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;
                        }
                        &:nth-of-type(2) {
                            margin-top: 7px;
                            width: 100%;
                            line-height: 20px;
                            padding-left: 4px;
                            height: 20px;
                            background: url('@/assets/image/monitornameback.png') no-repeat;
                            background-size: 100% 100%;
                            font-size: 12px;
                            color: #ffffff;
                        }
                    }
                    &:nth-of-type(2n) {
                        margin-right: 0;
                    }
                }
                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }
}
</style>
